<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-button  size="medium" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-plus" @click="handleAdd">添加</el-button>
    </div>
    <!--由listLoading决定是否加载-->
    <el-table stripe :data="connectorList" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" prop="name" label="连接器名称" width="350px"></el-table-column>
      <el-table-column align="center" prop="connectorStatus.state" label="连接器状态" width="350px"></el-table-column>
      <el-table-column fixed="right" align="center" label="操作" class-name="small-padding" width="600px">
        <template slot-scope="scope">
          <el-button  size="mini" type="danger" icon="el-icon-search" @click="getConnectorDetail(scope.row.name)">查询详情</el-button>
          <el-button  size="mini" type="danger" icon="el-icon-edit" @click="handleUpdate(scope.row.name)">更新配置</el-button>
          <el-button  size="mini" type="danger" :disabled="scope.row.connectorStatus.state=='RUNNING'?true:false" @click="resumeConnector(scope.row.name)">恢复</el-button>
          <el-button  size="mini" type="danger" :disabled="scope.row.connectorStatus.state=='RUNNING'?false:true" @click="pauseConnector(scope.row.name)">暂停</el-button>
          <el-button  size="mini" type="danger" icon="el-icon-delete" @click="deleteConnector(scope.row.name)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--
      创建和编辑应用的页面
    -->
    <el-dialog :close-on-click-modal="false" top="5vh" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form :rules="rules" :model="dataForm" label-position="left" label-width="130px" style='width: 560px;'>
        <el-form-item label="连接器名字" prop="name">
          <el-input v-model="dataForm.name" style="width: 500px" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="连接class">
          <el-select v-model="dataForm.config.connector_class" placeholder="请选择" class="dialog-input" style="width: 500px">
            <el-option v-for="item in connectorClassOptions" :key="item.id" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="数据库主机名">
          <el-input v-model="dataForm.config.database_hostname" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="数据库端口">
          <el-input v-model="dataForm.config.database_port" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="数据库用户名">
          <el-input v-model="dataForm.config.database_user" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="数据库密码">
          <el-input v-model="dataForm.config.database_password" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="服务器id">
          <el-input v-model="dataForm.config.database_server_id" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="服务器名">
          <el-input v-model="dataForm.config.database_server_name" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="监控数据库列表">
          <el-input v-model="dataForm.config.database_include_list" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="kafka">
          <el-input v-model="dataForm.config.database_history_kafka_bootstrap_servers" style="width: 500px" placeholder="例如:hadoop102:9092"></el-input>
        </el-form-item>
        <el-form-item label="kafkatopic">
          <el-input v-model="dataForm.config.database_history_kafka_topic" style="width: 500px" placeholder="schema-changes.inventory" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="add">确 定</el-button>
        <el-button v-else-if="dialogStatus=='update'" type="primary" @click="updateData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//
//import { parseTime, deepClone } from '@/utils'
//import {initLogScroller, logRefresh, logInfoRefresh} from "@/utils/log"
import {parseTime, deepClone} from '@/utils'
import api from '@/api/dataaccess/dataaccess'

const connectorClassOptions = [
  {id: 0, label: 'io.debezium.connector.mysql.MySqlConnector', value: "io.debezium.connector.mysql.MySqlConnector"},
  {id: 1, label: 'io.debezium.connector.postgresql.PostgresConnector', value: "io.debezium.connector.postgresql.PostgresConnector"},
  {id: 2, label: 'io.debezium.connector.mongodb.MongoDbConnector', value: "io.debezium.connector.mongodb.MongoDbConnector"},
  {id: 3, label: 'io.debezium.connector.sqlserver.SqlServerConnector', value: "io.debezium.connector.sqlserver.SqlServerConnector"},
  {id: 4, label: 'io.debezium.connector.oracle.OracleConnector', value: "io.debezium.connector.oracle.OracleConnector"},

]

export default {
  data() {
    return {
      dialogFormVisible: false,
      dialogStatus: '',
      updateStatus:'',
      textMap: {
        update: '编辑',
        create: '创建'
      },
      rules: {
        name: [{required: true, message: '名称必填', trigger: 'blur'}],
        // config:{
        //   connectorClass:[{required: true, message: '名称必填', trigger: 'blur'}],
        //   hostname:[{required: true, message: '名称必填', trigger: 'blur'}],
        //   port:[{required: true, message: '名称必填', trigger: 'blur'}],
        //   user:[{required: true, message: '名称必填', trigger: 'blur'}],
        //   password:[{required: true, message: '名称必填', trigger: 'blur'}],
        //   serverId:[{required: true, message: '名称必填', trigger: 'blur'}],
        //   serverName:[{required: true, message: '名称必填', trigger: 'blur'}],
        //   databases:[{required: true, message: '名称必填', trigger: 'blur'}],
        //   historyBootstrapServers:[{required: true, message: '名称必填', trigger: 'blur'}],
        //   historyTopic:[{required: true, message: '名称必填', trigger: 'blur'}]
        // }
      },
      connectorClassOptions,
      dataForm: {
        name:'',
        config:{
          connector_class:'',
          database_hostname:'',
          database_port:'',
          database_user:'',
          database_password:'',
          database_server_id:'',
          database_server_name:'',
          database_include_list:'',
          database_history_kafka_bootstrap_servers:'',
          database_history_kafka_topic:'schema-changes.inventory'
        }
      },
      query: {
        // pageSize: 20,
        // pageNo: 1,
        name:'mysql'
      },
      connectorList:[],
      // portJson,
      // updateForm:{
      //   connectorDetail:''
      // }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    //获得connector列表
    getList() {
      api.getConnectorList(this.query.name).then(response => {
        this.connectorList = response ;
      })
    },
    handleUpdate(name) {
      this.dateForm = this.getConnectorDetail(name)
      this.dialogFormVisible = true
      this.dialogStatus = 'update'

    },
    handleAdd() {
      // this.tmpTask.tagId=this.$route.query.id
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.dataForm = {name:'',
        config:{
          connector_class:'',
          database_hostname:'',
          database_port:'',
          database_user:'',
          database_password:'',
          database_server_id:'',
          database_server_name:'',
          database_include_list:'',
          database_history_kafka_bootstrap_servers:'',
          database_history_kafka_topic:'schema-changes.inventory'
        }}
    },
    resetForm(formName) {
      this.$nextTick(()=>{
        this.$refs[formName].resetFields();
      })
    },

    //新建tconnector
    add() {
      console.log(JSON.stringify(this.dataForm))
      api.registerConnector(this.dataForm).then(response => {
        this.dialogFormVisible = false
        if (response.status == 200) {
          this.$notify({
            title: '成功',
            message: '创建成功',
            type: 'success',
            duration: 2000
          })
          this.dialogFormVisible = false
          this.getList()
        } else
          "错误";
      })
    },

    updateData() {
          api.updateConnector(JSON.stringify(this.dataForm)).then(response => {
            console.log(response);
            if (response.status == 200) {
              this.$notify({type: 'success', title: '成功', duration: 2000, message: '编辑成功'})
              this.dialogFormVisible = false
              this.getList()
            } else {
              this.$notify({type: 'error', title: '失败', duration: 5000, message: data.message})
            }
          })
    },
    //查询详情
    getConnectorDetail(name) {
      this.dialogFormVisible = true
      this.dialogStatus = ''
      api.getConnectorDetail(name).then(response => {
        this.dataForm=response
        console.log("333333"+this.dataForm)
        if (response.status == 200) {
          this.$notify({type: 'success', duration: 2000, message: '删除成功', title: '成功'})
          this.getList()
        } else {
          this.$notify({type: 'error', duration: 5000, message: data.message, title: '失败'})
        }
      })
    },
    //删除connector
    deleteConnector(name) {
      api.deleteConnector(name).then(response => {
        if (response.status == 200) {
          this.$notify({type: 'success', duration: 2000, message: '删除成功', title: '成功'})
          this.$forceUpdate()
          this.getList()
        } else {
          this.$notify({type: 'error', duration: 5000, message: data.message, title: '失败'})
        }
      })
    },
    //恢复connector
    resumeConnector(name) {
      api.resumeConnector(name).then(response => {
        console.log("22222222"+response.status)
        if (response.status == 200) {
          this.$notify({type: 'success', duration: 2000, message: '恢复成功', title: '成功'})
          this.$forceUpdate()
          this.getList()
        } else {
          this.$notify({type: 'error', duration: 5000, message: data.message, title: '失败'})
        }
      })
    },
    //暂停connector
    pauseConnector(name) {
      api.pauseConnector(name).then(response => {
        if (response.status == 200) {
          this.$notify({type: 'success', duration: 2000, message: '暂停成功', title: '成功'})
          this.getList()
          this.$forceUpdate()
        } else {
          this.$notify({type: 'error', duration: 5000, message: data.message, title: '失败'})
        }
      })
    },
    //页面大小改变时
    handleSizeChange(val){
      this.query.pageNo = 1
      this.userTaskQuery.pageSize = val
      this.getList();
    },
    //当前页面改变时
    handleCurrentChange(val){
      this.query.pageNo = val
      this.getList();

    },
  }
}

</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-button--mini, .el-button--mini.is-round{padding:7px 6px}
</style>
